<template>
  <div class="Homechir">
    <!--    物流信息-->
    <p>二审状态 ---------- {{ status }}</p>
    <p>配送状态(0:诊疗中,1:驳回 2:待审核,3,待复审,4:待支付,5:待取药,6:待配送,7:待收货,8:已完成,9:已作废,10:无效处方,11已退费,12审核中,13超时未支付。) --6546546--------  {{ distributionStatus }}</p>
    <!--  发货状态  -->
    <div class="Homechir-one">
      <div style="width: 380px;float: left;border-right: 1px solid #E4E9EE;height: 180px;margin-top: 10px;">
        <p style="width: 350px;margin: auto;color: #242526;font-size: 16px;margin-top: 15px;height: 35px;line-height: 35px;">订单号：{{ count.orderNumber }}</p>
        <p style="width: 350px;margin: auto;color: #F56C6C;font-size: 21px;height: 35px;line-height: 35px">{{ distributionStatus === 6 ? '待配送' : (distributionStatus === 7 ? '待收货 （预计签收时间72小时内）' : (distributionStatus === 8 ? '已完成' : (distributionStatus === 10 ? '待退款' : '已退款'))) }}</p>
        <p style="width: 350px;margin: auto;color: #888888;font-size: 13px;line-height: 15px;height: 15px">{{ distributionStatus === 6 ? '客户已付款,等待商家发货' : (distributionStatus === 7 ? '调配药师已审核发药,等待客户确认收货' : (distributionStatus === 8 ? '客户已确认收货,订单完成' : (distributionStatus === 10 ? '订单待退款' : '订单已退款'))) }}</p>
      </div>
      <div style="width: calc(100% - 380px);float: left;height: 78px;margin-top: 65px;padding: 0 20px">
        <Steps v-if="status === -1" :current="distributionStatus === 6 ? 0 : (distributionStatus === 7 ? 1 : 2)">
          <Step style="width: auto" title="药店接收订单" icon="ios-checkmark"></Step>
          <Step v-if="distributionStatus === 10" style="width: auto" title="药店待退款" :icon="distributionStatus !== 10 ? 'ios-checkmark' : 'ios-close'"></Step>
          <Step v-else style="width: auto" title="调配师审药发药" :icon="distributionStatus !== 6 ? 'ios-checkmark' : 'ios-close'"></Step>
          <Step v-if="distributionStatus === 11" style="width: auto" title="药店退款" icon="ios-checkmark"></Step>
          <Step v-else title="用户取药" style="width: auto" :icon="distributionStatus === 8 ? 'ios-checkmark' : 'ios-close'"></Step>
        </Steps>
        <Steps v-else :current="distributionStatus === 6 ? 1 : (distributionStatus === 7 ? 2 : (distributionStatus === 8 ? 3 : (distributionStatus === 11 ? 2 : 1)))" align-center process-status="wait">
          <Step style="width: auto" title="药店接收二审处方" icon="ios-checkmark"></Step>
          <Step v-if="status === 1" style="width: auto" title="处方二审成功" icon="ios-checkmark"></Step>
          <Step v-else style="width: auto" title="处方二审驳回" icon="ios-close"></Step>
          <Step v-if="distributionStatus === 10 || distributionStatus === 11" style="width: auto" title="药店退款" :icon="distributionStatus === 11 ? 'ios-checkmark' : 'ios-close'"></Step>
          <Step v-if="distributionStatus === 6 || distributionStatus === 7 || distributionStatus === 8" style="width: auto" title="调配药师审药发药" :icon="distributionStatus === 7 || distributionStatus === 8 ? 'ios-checkmark' : 'ios-close'"></Step>
          <Step v-if="distributionStatus === 6 || distributionStatus === 7 || distributionStatus === 8" style="width: auto" title="客户确认收货" :icon="distributionStatus === 8 ? 'ios-checkmark' : 'ios-close'"></Step>
        </Steps>
      </div>
    </div>
    <!--  处方驳回信息  -->
    <div v-show="status === 0" class="Homechir-sel" style="padding-top: 10px;">
      <div v-show="distributionStatus === 8 || distributionStatus === 10 || distributionStatus === 11">
        <div style="width: 380px;height: 180px;float: left;border-right: 1px solid #E4E9EE;">
          <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">处方驳回信息</p>
          <p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">驳回原因: {{ count.rejectReason === '1' ? '处方不合规' : (count.rejectReason === '2' ? '用药不适宜' : '超长处方') }}</p>
          <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">驳回时间: {{ count.createTime ? count.createTime : '暂无驳回时间' }}</p>
        </div>
        <div style="width: calc(100% - 380px);float: left;">
          <p style="width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 14px;line-height: 25px;min-height: 60px;margin-top: 50px">驳回原型详细说明：{{ count.reportType ? count.reportType : '暂无驳回原型详细说明' }}</p>
        </div>
      </div>
    </div>
    <!--  退款信息  -->
    <div v-show="status === 0 && distributionStatus === 10 || distributionStatus === 11" class="Homechir-sel" style="padding-top: 10px;height: 225px">
      <div style="width: 380px;height: 205px;float: left;border-right: 1px solid #E4E9EE;">
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">退款信息</p>
        <p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">订单编号: {{ count.orderNumber ? count.orderNumber : '暂无订单编号' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款金额: {{ count.drugMoney ? count.drugMoney : 0 }}元</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单总金额: {{ count.drugMoney ? count.drugMoney : 0 }}元</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款路径: 原路返回</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款时间: {{ count.refundTime ? count.refundTime : '暂无退款时间' }}</p>
      </div>
      <div style="width: calc(100% - 380px);float: left;">
        <p style="width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 14px;line-height: 25px;min-height: 60px;margin-top: 50px">退款原因：{{ count.reason ? count.reason : '暂无退款原因' }}</p>
      </div>
    </div>
    <!--  物流信息  -->
    <div v-show="distributionStatus === 7 || distributionStatus === 8" class="Homechir-two">
      <div style="width: 380px;float: left;border-right: 1px solid #E4E9EE;height: 180px;margin-top: 10px;">
          <p style="width: 350px;margin:0 auto;color: #242526;font-size: 16px;margin-top: 15px;height: 35px;line-height: 35px;">物流信息</p>
          <p style="width: 350px;margin:0 auto;color: #242526;font-size: 13px;height: 30px;line-height: 30px;">配送方式: 快递物流</p>
          <p style="width: 350px;margin:0 auto;color: #242526;font-size: 13px;line-height: 25px;height: 25px;">物流公司: <span style="color: #409EFF">{{ count.expressName ? count.expressName + '快递' : '立即发货' }}</span></p>
          <p style="width: 350px;margin:0 auto;color: #242526;font-size: 13px;line-height: 25px;height: 25px;">物流单号: <span style="color: #242526">{{ count.expressCode ? count.expressCode : '---' }}</span></p>
        </div>
      <div style="width: calc(100% - 380px);float: left;">
          <div style="width: 150px;float: left;text-align: center;height: 78px;line-height:78px;margin-top: 85px">
            <i-button type="primary" style="display: block;width: 95px;height: 35px;line-height: 0;margin: auto" @click="cahidwhawuliu">查看物流</i-button>
          </div>
          <div v-show="wuliumask" style="width: 200px;margin: auto;float: left;height: 78px;line-height:78px;margin-top: 65px"><img src="@/assets/basic1.png" alt="" style="display: block;width: 40px;height: 40px;float: left;margin-top: 19px;"><span style="display: block;width: 150px;font-size: 14px;float: left;color: #888888">暂无相关的物流信息</span></div>
          <div v-show="!wuliumask" class="wuliu" style="width: calc(100% - 150px);height: 160px;margin-top: 20px;float: left;overflow: auto">
            <Steps direction="vertical" :active="0">
              <Step v-for="item in wulist" :key="item.id" :title="item.acceptTime" :description="item.remark" icon="iconfont icon-yuan"></Step>
            </Steps>
          </div>
        </div>
    </div>
    <!--  订单信息  -->
    <div class="Homechir-sel" style="padding-top: 10px;height: 300px">
      <div style="width: 380px;height: 280px;float: left;border-right: 1px solid #E4E9EE;">
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">订单信息</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收货人: {{ count.receiverName ? count.receiverName : '暂无收货人' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ count.receiverPhone ? count.receiverPhone : '暂无联系电话' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收货地址: {{ count.detailAddress ? count.detailAddress : '暂无收货地址' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单号: {{ count.orderNumber ? count.orderNumber : '暂无订单号' }}</p>
        <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">支付方式: 微信支付</p>
      </div>
      <div style="width: calc(100% - 380px);float: left;">
        <p style="width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">药品清单</p>
        <div style="width: 90%;margin: 0 auto 0 auto;text-align: center">
          <Table
            :columns="columns1"
            :data="data2"
            height="200"
            border
            style="width: 100%;text-align: center"
            :header-cell-style="{background:'#FAFAFA',color:'#242526',border: '1px solid #E8E8E8 !important','text-align': 'center',height: '30px !important', padding: '8px 0'}"
            :cell-style="{background:'#ffffff',color:'#242526',border: '1px solid #E8E8E8 !important','text-align': 'center',height: '30px !important', padding: '8px 0'}"
          ></Table>
        </div>
        <p style="text-align: right;width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 12px;height: 30px;line-height: 30px">订单药品金额：<span>￥{{ count.amt }}</span><span style="display: inline-block;margin-left: 20px;">订单配送费：<span>￥{{ count.provice ? count.provice : '0' }}</span></span><span style="display: inline-block;color: #FD5C72;margin-left: 20px;">支付总金额：<span>￥{{ count.drugMoney ? count.drugMoney : '0' }}</span></span></p>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  name: 'Phachir',
  data() {
    return {
      columns1: [
        // { title: "药品编码", key: "id", align: "center"},
        { title: '排序', key: 'sum', width: 80, align: 'center', },
        { title: "药品通用名", key: "itemname", align: "center"},
        { title: "规格", key: "itemspec", align: "center"},
        { title: "剂型", key: "ypjx", align: "center"},
        { title: "单位", key: "itemdoseunit", align: "center"},
        { title: "数量", key: "itemdose", align: "center"},
        { title: "库存", key: "stock", align: "center"},
        { title: "售价", key: "price", align: "center"}
      ],
      wuliumask: false,
      distributionStatus: null,
      status: null,
      data2: [],
      count: {}
    }
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "处方管理"
      },
      {
        path: "operation/prescriptionmanage/ordersearch/review",
        title: "订单详情"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    this.ishomeget()
  },
  methods: {
    ishomeget() {
      const map = {
        "examineId": this.$route.params.id
      }
      this.$axios
        .post(api.enteDetails, map)
        .then(res => {
          if (res.data.code === 1) {
            this.count = res.data.object;
            this.status = parseInt(res.data.object.status)
            this.distributionStatus = parseInt(res.data.object.distributionStatus)
            this.data2 = res.data.object.clinicBillEntityList
            if(this.data2){
							this.data2.forEach((item,index) => {
								item.sum = this.addZeros(index);
							})
						}
          } else {
            this.$Message.error("请求异常");
          }
        })
    },
    cahidwhawuliu() {
      // getOrderTraces
      const map = {
        id: this.$route.params.id
      }
      this.$axios
        .post(api.ordersSearchDetail, map)
        .then(res => {
          if (res.data.code === 1) {
            var andlist = JSON.parse(response.message)
            andlist.sort((a, b) => a.opcode > b.opcode ? -1 : 1)
            this.wulist = andlist
            this.wuliumask = false
          } else {
            console.log(res)
            this.$Message.error(res.message || "请求异常");
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
  .ivu-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    line-height: 1.5;
  }
  .ivu-steps-item:last-child{
    flex: none !important;
  }
  .Homechir .ivu-steps-item{
    display: inline-block;
    position: relative;
    vertical-align: top;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
  .Homechir {
    width: 100%;
    min-width: 1000px;
    padding-bottom: 25px;
    .Homechir-one,
    .Homechir-two,
    .Homechir-sel{
      width: calc(100% - 50px);
      margin: auto;
      margin-top: 25px;
      min-height: 200px;
      background-color: white;
      box-shadow:0px 0px 15px 0px rgba(127,127,127,0.1);
      border-radius:10px;
    }
  }
</style>
